<template>
	<view>
		<view class="balanceHead">
			<view class="balanceTop">当前余额(cny)</view>
			<view class="balanceCenter">
				<view class="centerLeft">{{ number }}</view>
			</view>
			<!-- <view class="balanceBtm">
				<view class="btmLeft">
					昨日提现：￥666.00
				</view>
				<view class="btmRight">
					累计提现：￥8666.00
				</view>
			</view> -->
		</view>

		<view class="particulars">明细</view>

		<view class="particuList">
			<view v-for="(item, index) in balanceList" :key="index" class="item">
				<view class="itemLeft">
					<view class="itemLeft-top">{{ item.mark }}</view>
					<view class="itemLeft-btm">{{ item.create_time }}</view>
				</view>
				<view class="itemRight">
					<text v-if="item.pm == 0">-</text>
					<text v-else>+</text>
					<text>{{ item.number }}</text>
				</view>
			</view>
		</view>
		<view v-if="!balanceList.length" class="notAvailable">暂无明细~</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: '',
			balanceList: []
		};
	},
	onLoad(e) {
		this.number = e.num;
		this.getBalance();
	},
	methods: {
		// 获取我的余额
		getBalance() {
			this.$api.getUserBalance(res => {
				res.data.forEach(item => {
					item.number = Math.abs(item.number - item.balance);
				});
				this.balanceList = res.data;
			});
		}
	}
};
</script>

<style lang="less">
.balanceHead {
	height: 380rpx;
	background: url(../../../static/images/background12.png) no-repeat;
	background-size: 100% 100%;
	padding: 50rpx 70rpx 0;
	font-size: 26rpx;
	color: #ffffff;
	.balanceCenter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 35rpx 0;
		.centerLeft {
			font-size: 76rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}

	.balanceBtm {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
	}
}

.particulars {
	font-size: 36rpx;
	font-weight: 400;
	color: #1a1a1a;
	padding: 0 50rpx;
	margin-bottom: 20rpx;
	font-size: 36rpx;
	color: #1a1a1a;
}

.particuList {
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 670rpx;
		height: 150rpx;
		background: #ffffff;
		box-shadow: 0px 0px 28rpx 0px rgba(48, 48, 48, 0.1);
		border-radius: 8rpx;
		margin: 0 auto 20rpx;
		padding: 0 20rpx;
		.itemLeft {
			.itemLeft-top {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}
			.itemLeft-btm {
				font-size: 24rpx;
				font-weight: 400;
				color: #808080;
			}
		}
		.itemRight {
			font-size: 40rpx;
			// font-weight: bold;
			color: #fe3f10;
		}
	}
}

.notAvailable {
	width: 100%;
	height: 150rpx;
	text-align: center;
	line-height: 200rpx;
	font-size: 24rpx;
	color: #666;
	margin-top: 200rpx;
}
</style>
